<template>
    <div class="brand-selection-container">
        <!-- 顶部提示信息 -->
        <div class="tip-box">
            <div class="tip-icon">?</div>
            <div class="tip-text">
                请选择您所需要的代理的区域，提交记录完成后台将进行审核，审核通过后您将获得该品牌的代理资格。
            </div>
        </div>

        <!-- 品牌选择区域 -->
        <div class="form-section">
            <div class="product-item">
                <div class="product-required">*</div>
                <selectBrand style="width: 100%" v-model="form.brand_id" label="授权品牌"
                    :options="brandOptions" placeholder="请选择品牌" />
            </div>
            <div class="product-item">
                <div class="product-required">*</div>
                <selectBrand style="width: 100%" v-model="form.province" label="授权省" :options="areaObj.province"
                    placeholder="请选择省份" modelKey="code" @changeBrand="getCityAreaListData('city', form.province)" />
            </div>
            <div class="product-item">
                <div class="product-required">*</div>
                <selectBrand style="width: 100%" v-model="form.city" label="授权市" :options="areaObj.city"
                    placeholder="请选择市" modelKey="code" @changeBrand="getCityAreaListData('area', form.city)" />
            </div>
            <div class="product-item">
                <div class="product-required">*</div>
                <selectBrand style="width: 100%" v-model="form.area" modelKey="code" label="授权区" :options="areaObj.area"
                    placeholder="请选择区" />
            </div>
        </div>

        <!-- 底部保存按钮 -->
        <div class="footer-btn">
            <button class="save-btn" @click="saveSelection">提交</button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getAllBrandList, getCityAreaList, addBrandArea, reGetBrandArea } from "@/api/brandApply";
import selectBrand from "@/component/goods/selectBrand.vue";
// 品牌选项数据
const brandOptions = ref([]);
const form = reactive({
    id: undefined,
    brand_id: undefined,
    province: '',
    city: '',
    area: '',
})

const areaObj = reactive({
    province: [],
    city: [],
    area: [],
})

// 保存选择
const saveSelection = async () => {
    if (!form.brand_id) {
        uni.showToast({
            title: "请选择一个品牌",
            icon: "none",
        });
        return;
    }
    if (!form.province) {
        uni.showToast({
            title: "至少选择一个省",
            icon: "none",
        });
        return;
    }

    let area_code = '',
        area = ''
    if (form.province) {
        area_code = area_code + form.province
        area = areaObj.province.find(
            (item) => item.code === form.province
        ).name
        if (form.city) {
            area_code = area_code + '-' + form.city
            area = areaObj.city.find((item) => item.code === form.city).name
        }
        if (form.area) {
            area_code = area_code + '-' + form.area
            area = areaObj.area.find((item) => item.code === form.area).name
        }
    }
    !form.id
        ? await addBrandArea({
            id: form.id,
            brand_id: form.brand_id,
            area_code,
            area,
        })
        : await reGetBrandArea({
            id: form.id,
            brand_id: form.brand_id,
            area_code,
            area,
        })
        uni.navigateBack();
    
};
const getBrandListData = async () => {
    const res = await getAllBrandList()
    brandOptions.value = res.map((i) => ({ id: i.id, name: i.name }));
};

// 获取省数据
const getCityAreaListData = async (type = 'province', code, reback) => {
    const res = await getCityAreaList({
        parent_code: code,
    })
    switch (type) {
        case 'province':
            areaObj.province = res
            break
        case 'city':
            areaObj.city = res
            if (!reback) {
                form.city = ''
                form.area = ''
            }
            break
        case 'area':
            areaObj.area = res
            !reback && (form.area = '')
            break
    }
}
onLoad(async (options) => {
    await getBrandListData();
    await getCityAreaListData()
    if (options.item) {
        let row = JSON.parse(options.item)
        form.id = row.id
        form.brand_id = row.brand_id
        const code = row.area_code.split('-')
        form.province = code[0] || ''
        if (code[0] && !code[1]) {
            await getCityAreaListData('city', code[0], 'reback')
            return
        }
        if (code[1]) {
            form.city = code[1] || ''
            await getCityAreaListData('city', code[0], 'reback')
            await getCityAreaListData('area', code[1], 'reback')
        }
        if (code[2]) {
            form.area = code[2] || ''
        }
    }
});
</script>

<style scoped>
.brand-selection-container {
    min-height: 100vh;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
}

/* 顶部提示信息样式 */
.tip-box {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
}

.tip-icon {
    width: 40rpx;
    height: 40rpx;
    background-color: #f2f2f2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    font-size: 28rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.tip-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
}

/* 表单区域样式 */
.form-section {
    background-color: #ffffff;
    padding: 0 30rpx;
    flex: 1;
}

/* 底部按钮样式 */
.footer-btn {
    width: 100%;
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
}

.save-btn {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    background-color: #1989fa;
    color: #ffffff;
    font-size: 32rpx;
    text-align: center;
    border: none;
    border-radius: 0;
}


.product-item {
    display: flex;
    align-items: center;
    padding: 25rpx 0;
}

.product-required {
    color: #f56c6c;
    font-size: 28rpx;
    margin-right: 5rpx;
}

.product-label {
    width: 100rpx;
    font-size: 28rpx;
    color: #333;
}
</style>